<template>
  <div class="dictionaryManage">
    <div class="crumbs">
      <header class="crumbs_arr_box">
        <span>字典管理</span>
      </header>
    </div>
    <div class="card_table" v-loading="queryBool">
      <!-- tag切换控件 -->
      <div class="tag">
        <el-tabs @tab-click="query" v-model="config.dicType" style="width: 100%">
          <el-tab-pane label="页面类型" name="1"></el-tab-pane>
          <el-tab-pane label="业务大类" name="2"></el-tab-pane>
          <el-tab-pane label="区块类型" name="3"></el-tab-pane>
          <el-tab-pane label="展位类型" name="4"></el-tab-pane>
          <el-tab-pane label="版本" name="5"></el-tab-pane>
        </el-tabs>
      </div>
      <!-- 表格头部控件 -->
      <header>
        <!-- 左侧查询控件 -->
        <span>
          <el-input
            v-if="config.dicType!=5"
            v-model="config.dicValue"
            clearable
            size='small'
            class="sel_inp"
            placeholder="请输入内容"
          >
            <el-button @click="query" slot="append" icon="el-icon-search"></el-button>
          </el-input>
          <el-select
            v-if="config.dicType==5"
            filterable
            clearable
            size='small'
            @change="query"
            class="sel_inp"
            v-model="config.appId"
            placeholder="请选择应用"
          >
            <el-option
              v-for="item in appList"
              :key="item.appId"
              :label="item.appName"
              :value="item.appId"
            ></el-option>
          </el-select>
        </span>
        <!-- 右侧追加控件 -->
        <span>
          <el-button v-if="config.dicType!=5" @click="showDraw(null)" type="primary" size="mini">添加</el-button>
          <el-button
            v-if="config.dicType==5"
            @click="showDrawVer(null,'添加')"
            type="primary"
            size="mini"
          >添加</el-button>
        </span>
      </header>
      <!-- 表体区域 -->
      <section :key="updateBool">
        <el-table v-if="config.dicType!=5" :size="table_size" :data="tableData" style="width: 100%">
          <el-table-column prop="dicCode" label="编码" width="120"></el-table-column>
          <el-table-column prop="dicValue" label="名称" width="120"></el-table-column>
          <el-table-column prop="dicDesc" label="说明" sortable></el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button plain size="mini" type="text" @click="showDraw(scope.row)">编辑</el-button>
              <el-button @click="deleate(scope.row)" plain size="mini" type="text">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-table v-else :size="table_size" :data="tableData">
          <el-table-column prop="appName" label="应用名称" width="120"></el-table-column>
          <el-table-column prop="version" label="版本" sortable></el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button plain size="mini" @click="showDrawVer(scope.row,'编辑')" type="text">编辑</el-button>
              <el-button @click="deleate(scope.row)" plain size="mini" type="text">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </section>
      <!-- 分页控件 -->
      <footer>
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="config.currentPage"
          @size-change="handleSizeChange"
          :page-sizes="[5, 10, 30, 50, 100]"
          :page-size="config.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </footer>
    </div>
    <!-- 字典 抽屉区域 -->
    <el-drawer title :modal="false" :visible.sync="drawer_bool" :with-header="false">
      <div class="drawer_box">
        <header>
          <span class="til" v-if="drawerDic.id">编辑 ： {{ drawerDic.dicValue }}</span>
          <span class="til" v-else>添加</span>
          <i @click="drawer_bool = false" class="el-icon-close"></i>
        </header>
        <section>
          <div class="section_til">字典类型</div>
          <div class="el_com">
            <el-select
              :disabled="true"
              v-model="config.dicType"
              :size="table_size"
              class="el_inp"
              placeholder="请选择"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div class="section_til">字典名称</div>
          <div class="el_com">
            <el-input class="el_inp" v-model="drawerDic.dicValue" placeholder="请输入内容"></el-input>
          </div>
          <div class="section_til">字典描述</div>
          <div class="el_com">
            <el-input
              v-model="drawerDic.dicDesc"
              :size="table_size"
              class="el_inp lang"
              type="textarea"
              :rows="3"
            ></el-input>
          </div>
        </section>
        <footer>
          <el-button
            :disabled="drawerDicLoading"
            class="btn"
            v-if="drawerDic.id"
            @click="dicSave(true)"
            size="mini"
            type="primary"
          >保存</el-button>
          <el-button
            class="btn"
            :disabled="drawerDicLoading"
            v-else
            @click="dicSave(false)"
            size="mini"
            type="primary"
          >添加</el-button>
          <el-button class="btn" @click="drawer_bool = false" size="mini" type="primary" plain>取消</el-button>
        </footer>
      </div>
    </el-drawer>
    <!-- 版本 抽屉区域 -->
    <el-drawer title :modal="false" :visible.sync="drawerBool" :with-header="false">
      <div class="drawer_box">
        <header>
          <span
            class="til"
            v-if="drawerVer.id"
          >编辑 ： {{ drawerVer.appName }} —— {{drawerVer.version}}</span>
          <span class="til" v-else>添加</span>
          <i @click="drawerBool = false" class="el-icon-close"></i>
        </header>
        <section>
          <div class="section_til">应用名称</div>
          <div class="el_com">
            <el-select
              :disabled="drawerVer.id?true:false"
              filterable
              class="el_inp"
              v-model="drawerVer.appId"
              placeholder="请选择应用"
            >
              <el-option
                v-for="item in appList"
                :key="item.appId"
                :label="item.appName"
                :value="item.appId"
              ></el-option>
            </el-select>
          </div>
          <div class="section_til">版本号</div>
          <div class="el_com">
            <el-input class="el_inp" v-model="drawerVer.version" placeholder="请输入内容"></el-input>
          </div>
        </section>
        <footer>
          <el-button
            :disabled="drawerVerLoading"
            class="btn"
            v-if="drawerVer.id"
            @click="VerSave(true)"
            size="mini"
            type="primary"
          >保存</el-button>
          <el-button
            class="btn"
            :disabled="drawerVerLoading"
            v-else
            @click="VerSave(false)"
            size="mini"
            type="primary"
          >添加</el-button>
          <el-button class="btn" @click="drawerBool = false" size="mini" type="primary" plain>取消</el-button>
        </footer>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import application from "@/utils/api/application.js";
export default {
  name: "dictionaryManage",
  components: {},
  data() {
    return {
      updateBool: 0,
      queryBool: false,
      appList: [],
      options: [
        {
          value: "1",
          label: "页面类型"
        },
        {
          value: "2",
          label: "业务大类"
        },
        {
          value: "3",
          label: "区块类型"
        },
        {
          value: "4",
          label: "展位类型"
        },
        {
          value: "5",
          label: "版本"
        }
      ],
      total: 0,
      tableData: [],
      config: {
        dicType: "1",
        pageSize: 10,
        currentPage: 1,
        dicValue: "",
        appId: null
      },
      drawerDicLoading: false,
      table_size: "small",
      // 字典弹框对象
      drawerDic: {
        id: null,
        dicValue: null, // 字典名称
        dicDesc: null // 字典描述
      },
      drawer_bool: false, //  字典抽屉开关变量
      drawerVer: {
        appId: null,
        appName: null,
        id: null,
        version: null
      }, // 版本抽屉对象'
      drawerVerLoading: false,
      drawerBool: false // 版本抽屉开关
    };
  },
  methods: {
    //  版本添加 编辑打开弹框
    showDrawVer(item) {
      if (item) {
        this.drawerVer.appId = item.appId;
        this.drawerVer.appName = item.appName;
        this.drawerVer.id = item.id;
        this.drawerVer.version = item.version;
      } else {
        this.drawerVer = {
          appId: null,
          appName: null,
          id: null,
          version: null
        }; // 版本抽屉对象
      }
      this.drawerBool = true;
    },
    async VerSave(bool) {
      if (!this.drawerVer.appId || !this.drawerVer.version) {
        this.$message.error("版本号 / 应用名 不可为空");
        return;
      }
      this.drawerVerLoading = true;
      let res;
      // 更新版本
      if (bool) {
        res = await application.dic_version_update(this.drawerVer);
      }
      // 新增版本
      if (!bool) {
        res = await application.dic_version_add(this.drawerVer);
      }
      this.drawerVerLoading = false;
      if (res.success) {
        this.query();
        this.drawerBool = false;
      } else {
        this.$message.error(res.errorMessage);
      }
    },
    //  字典添加 编辑打开弹框
    showDraw(item) {
      if (item) {
        this.drawerDic.id = item.id;
        this.drawerDic.dicValue = item.dicValue;
        this.drawerDic.dicDesc = item.dicDesc;
      } else {
        this.drawerDic = {
          id: null,
          dicValue: null, // 字典名称
          dicDesc: null // 字典描述
        };
      }
      this.drawer_bool = true;
    },
    // 字典修改提交函数
    async dicSave(bool) {
      if (!this.drawerDic.dicValue) {
        this.$message.error("字典名称不可为空");
        return;
      }
      this.drawerDicLoading = true;
      let res;
      // 更新字典
      if (bool) {
        res = await application.dic_update(this.drawerDic);
      }
      // 新增字典
      if (!bool) {
        let obj = JSON.parse(JSON.stringify(this.drawerDic));
        obj.dicType = this.config.dicType;
        res = await application.dic_add(obj);
      }

      this.drawerDicLoading = false;
      if (res.success) {
        this.query();
        this.drawer_bool = false;
      } else {
        this.$message.error(res.errorMessage);
      }
    },
    async deleate(item) {
      this.queryBool = true;
      // 字典删除
      if (this.config.dicType != "5") {
        let res = await application.dic_delete({
          id: item.id
        });
        this.queryBool = false;
        if (res.success) {
          this.query();
        } else {
          this.$message.error(res.errorMessage);
        }
      } else {
        let res = await application.dic_version_delete({
          id: item.id
        });
        this.queryBool = false;
        if (res.success) {
          this.query();
        } else {
          this.$message.error(res.errorMessage);
        }
      }
    },
    // 数据请求函数
    async query() {
      this.queryBool = true;
      this.tableData = [];
      console.log(this.config,'业务大类')
      if (this.config.dicType != "5") {
        let res = await application.dic_list(this.config);
        this.queryBool = false;
        this.updateBool++;
        if (res.success) {
          this.tableData = res.value.list;
          this.total = res.value.total;
        }
      } else {
        let res = await application.dic_version_list(this.config);
        this.queryBool = false;
        this.updateBool++;
        if (res.success) {
          this.tableData = res.value.list;
          this.total = res.value.total;
        }
      }
    },
    async getAppList() {
      let res = await application.app_list({
        currentPage: 1,
        pageSize: 10000
      });
      if (res.success) {
        this.appList = res.value.list;
      } else {
        this.$message.error(res.errorMessage);
      }
    },
    handleCurrentChange(page) {
      this.config.currentPage = page;
      this.query();
    },
    handleSizeChange(page) {
      this.config.pageSize = page;
      this.query();
    }
  },
  created() {
    this.query();
    this.getAppList();
  },
  computed: {}
};
</script>

<style scoped lang="scss">
* {
  box-sizing: border-box;
}
// 抽屉壳子元素
.drawer_box {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: relative;
  header {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 0 20px 0 10px;
    border-bottom: 1px solid #e4e7ed;
    .til {
      font-family: "Helvetica Neue", Helvetica, "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
      font-size: 14px;
      font-weight: 600;
      color: rgba($color: #303133, $alpha: 1);
    }
    i {
      font-size: 16px;
      font-weight: 600;
      transition: all 0.5s ease;
    }
    i:hover {
      transform: rotate(90deg);
      font-size: 20px;
      font-weight: 800 !important;
    }
  }
  section::-webkit-scrollbar {
    display: none;
  }
  section {
    position: absolute;
    left: 0;
    right: 0;
    top: 60px;
    bottom: 66px;
    padding: 0 0 30px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    overflow-y: scroll;
    .section_til {
      width: 100%;
      text-indent: 20px;
      height: 30px;
      line-height: 30px;
      text-align: left;
      color: #909399;
      font-size: 12px;
    }
    .el_com {
      width: 100%;
      padding: 0 0 0 30px;
      padding: 6px 0 6px 30px;
      // height: 60px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .el_inp {
        width: 86%;
        // width: 300px;
        // transform: scale(1, 0.9);
      }
      .lang {
        width: 86%;
        // min-width: 400px;
      }
    }
  }
  footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 58px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 0;
    border-top: 1px solid #e4e7ed;
    .btn {
      margin: 0 20px;
    }
  }
}
.dictionaryManage::-webkit-scrollbar {
  display: none;
}
.dictionaryManage {
  width: 98%;
  margin: 0 auto;
  height: 98.6%;
  overflow-y: scroll;
  .card_table {
    width: 99%;
    margin: 10px auto 10px;
    padding-bottom: 50px;
    position: relative;
    .tag {
      width: 99%;
      margin: 0 auto;
      box-sizing: border-box;
      height: 50px;
      display: flex;
      align-items: center;
    }
    header {
      width: 99%;
      margin: 0 auto;
      box-sizing: border-box;
      height: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .sel_head {
        width: 300px;
        margin-right: 6px;
        margin-left: 0;
        transform: scale(1, 0.8);
      }
      .sel_inp {
        width: 5rem;
        // transform: scale(1, 0.8);
        margin-right: 0.4rem;
      }
    }
    footer {
      position: absolute;
      width: 97%;
      height: 50px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      bottom: 0;
      left: 1%;
    }
    section {
      width: 98%;
      // max-height: calc(66vh - 50px);
      overflow-y: scroll;
      margin: 6px auto;
    }
    section::-webkit-scrollbar {
      width: 0 !important;
    }
    section {
      -ms-overflow-style: none;
    }
    section {
      overflow: -moz-scrollbars-none;
    }
  }
}
</style>
